<template>
<!-- 模型第15层 -->
    <div>
        <div id="container" ref="container">    
        </div>
        <!-- 楼层标签 -->
        <div class="floor-labels" ref="floor_13">
            <div class="labels-line">
                <img src="../assets/images/line.png" style="width: 100%; height: 100%">
            </div>
            <div class="labels-content">
                <a style="display:table-cell; text-align: center; vertical-align:middle; font-size:0.2rem; color:white" @click="toNext(13)">13层</a>
            </div>
        </div>
        <div class="floor-labels" ref="floor_9">
            <div class="labels-line">
                <img src="../assets/images/line.png" style="width: 100%; height: 100%">
            </div>
            <div class="labels-content">
                <a style="display:table-cell; text-align: center; vertical-align:middle; font-size:0.2rem; color:white" @click="toNext(9)">9层</a>
            </div>
        </div>
        <div class="floor-labels" ref="floor_8">
            <div class="labels-line">
                <img src="../assets/images/line.png" style="width: 100%; height: 100%">
            </div>
            <div class="labels-content">
                <a style="display:table-cell; text-align: center; vertical-align:middle; font-size:0.2rem; color:white" @click="toNext(8)">8层</a>
            </div>
        </div>
        <div class="floor-labels" ref="floor_7">
            <div class="labels-line">
                <img src="../assets/images/line.png" style="width: 100%; height: 100%">
            </div>
            <div class="labels-content">
                <a style="display:table-cell; text-align: center; vertical-align:middle; font-size:0.2rem; color:white" @click="toNext(7)">7层</a>
            </div>
        </div>
        <div class="floor-labels" ref="floor_6">
            <div class="labels-line">
                <img src="../assets/images/line.png" style="width: 100%; height: 100%">
            </div>
            <div class="labels-content">
                <a style="display:table-cell; text-align: center; vertical-align:middle; font-size:0.2rem; color:white" @click="toNext(6)">6层</a>
            </div>
        </div>
        <div class="floor-labels" ref="floor_5">
            <div class="labels-line">
                <img src="../assets/images/line.png" style="width: 100%; height: 100%">
            </div>
            <div class="labels-content">
                <a style="display:table-cell; text-align: center; vertical-align:middle; font-size:0.2rem; color:white" @click="toNext(5)">5层</a>
            </div>
        </div>
        <div class="floor-labels" ref="floor_4">
            <div class="labels-line">
                <img src="../assets/images/line.png" style="width: 100%; height: 100%">
            </div>
            <div class="labels-content">
                <a style="display:table-cell; text-align: center; vertical-align:middle; font-size:0.2rem; color:white" @click="toNext(4)">4层</a>
            </div>
        </div>
        <div class="back-building">
            <a style="display:table-cell; text-align: center; vertical-align:middle; font-size:0.2rem; color:white" @click="toBuilding()">返回</a>
        </div>
        <!-- <div class="floor-labels" ref="floorLabel">
            <div style="font-size:0.2rem; color:white" @click="toNext(9)">9层</div>
        </div> -->
    </div>
</template>

<script>
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader'
import Stats from 'stats.js/build/stats.min.js'
import LoginVue from './Login.vue'
import { log } from 'three'

// 定义three全局变量
const scene = new THREE.Scene;
// three的控制器必须放在data外，否则会造成卡顿
let controls;
// 帧率显示插件
let stats;

export default {
    data() {
        return {
            camera: null,
            renderer: null,
            mesh: null,
            stats: null,
            floorPosition: null,
            tick: null,
            x: null,
            y: null,
        };
    },
    created() {
        window.addEventListener('resize',this.onWindowResize,false)
    },
    destroyed() {
        window.removeEventListener('resize',this.onWindowResize,false)
    },
    mounted() {
        this.init()
        this.animate()
        this.addModels()
    },
    methods: {
        // 渲染函数
        animate() {
            // this.stats.update();
            this.tick = requestAnimationFrame(this.animate);
            this.renderer.render(this.scene, this.camera);  
        },
        //导入模型
        addModels() {
            let loader = new GLTFLoader()
            loader.load('models/Three/doctor.gltf',obj => {
                obj.scene.position.y = -20
                obj.scene.name = 'modules'
                this.scene.add(obj.scene)
                // 初始化楼层标签的显示位置
                // this.getFloorLabel()
            },xhr => {
                console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
            }) 
        },
        // 跟随窗口大小变动
        onWindowResize() {
            this.camera.aspect = this.$refs.container.clientWidth / this.$refs.container.clientHeight
            this.camera.updateProjectionMatrix()
            this.renderer.setSize(this.$refs.container.clientWidth, this.$refs.container.clientHeight) 
        },
        // 楼层标签显示位置
        // getFloorLabel() {
        //     // 获得13层天花板的坐标
        //     let worldVector = new THREE.Vector3(20, 35, -15)
        //     // this.scene.children[2].children[19739].getWorldPosition(worldVector)
        //     // 世界坐标转标准设备坐标
        //     // standVector是WebGL设备坐标
        //     let standVector = worldVector.project(this.camera)
        //     // WebGL标准设备坐标转屏幕坐标
        //     const a = window.innerWidth / 2
        //     const b = window.innerHeight / 2 
        //     this.x = Math.round(standVector.x * a + a)
        //     this.y = Math.round(-standVector.y * b + b)
        //     let div = this.$refs.floor_13
        //     div.style.left = this.x + 'px'
        //     div.style.top = this.y + 'px'
        //     // 根据13层标签显示的位置计算其它楼层便签
        //     this.$refs.floor_9.style.left = this.x -5 + 'px'
        //     this.$refs.floor_9.style.top = this.y + 112 + 'px'
        //     this.$refs.floor_8.style.left = this.x -5 + 'px'
        //     this.$refs.floor_8.style.top = this.y + 141 + 'px'
        //     this.$refs.floor_7.style.left = this.x -5 + 'px'
        //     this.$refs.floor_7.style.top = this.y + 170 + 'px'
        //     this.$refs.floor_6.style.left = this.x -5 + 'px'
        //     this.$refs.floor_6.style.top = this.y + 198 + 'px'
        //     this.$refs.floor_5.style.left = this.x -5 + 'px'
        //     this.$refs.floor_5.style.top = this.y + 228 + 'px'
        //     this.$refs.floor_4.style.left = this.x -5 + 'px'
        //     this.$refs.floor_4.style.top = this.y + 256 + 'px'
        // }, 
        // 清空当前页面占用的浏览器显存，避免路由切换之后造成卡顿
          toBuilding() {
            // 销毁当前页面中threejs场景，释放浏览器缓存
            this.$router.push('/')
            this.clearCache() 
        },
        clearCache() {
            this.renderer.dispose()
            this.renderer.forceContextLoss()
            window.cancelAnimationFrame(this.tick)
            // this.renderer.context = null;
            this.renderer.domElement = null;
            this.renderer = null;
            this.scene = null
            this.camera = null
            this.controls = null
        },
        // 前往具体楼层页面
        // 因为每一层内部布局相同，所以点击不同楼层标签都只前往Floor_1，后面根据楼层号的不同，点击房间时返回不同的房间号 
        toNext(floor) {
            this.$store.commit('getFloorNumber', floor)
            window.sessionStorage.setItem('floorNumber', floor)
            // 释放threejs场景
            this.clearCache()
            this.$router.push('/Floor_1') 
        },
        //初始化
        init() {
            // 创建场景对象Scene
            this.scene = new THREE.Scene()
            // 相机设置
            let container = this.$refs.container
            this.camera = new THREE.PerspectiveCamera(
                70,
                container.clientWidth / container.clientHeight,
                0.01,
                1000
            );
            this.camera.position.set(30,25,81)
            // 光线
            this.scene.add(new THREE.AmbientLight(0xffffff));
            // 创建渲染器对象
            this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha:true, powerPreference: "high-performance" });
            this.renderer.setSize(container.clientWidth, container.clientHeight);
            container.appendChild(this.renderer.domElement);
            // 创建控件对象
            controls = new OrbitControls(this.camera, this.renderer.domElement);
            // 监听鼠标事件，仅在对视角进行旋转、平移时调用，更新楼层标签的显示位置
            // controls.addEventListener('change', () => {
            //     this.getFloorLabel()
            // });
            // 坐标轴辅助工具
            // let helper = new THREE.AxesHelper(50)
            // this.scene.add(helper)
            // 显示帧率
            // this.stats = new Stats()
            // container.appendChild(this.stats.dom)
            // 启用浏览器调试插件Three.js inspector
            // window.scene = this.scene;
            // window.THREE = THREE;
        },
    } 
}
</script>

<style lang="less" scoped>
#container {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("../assets/images/background.png");
  background-size: cover;
  z-index: -1;
}    
.floor-labels{
    width: 1.4rem;
    height: 0.35rem;
    position: absolute;
    z-index: 1;
    display: flex;
    .labels-line{
        margin-top: 0.07rem ;
        width: 0.4rem;
        height: 0.28rem;
    }
    .labels-content{
        width: 0.7rem;
        height: 0.33rem;
        border: 1px sloid #666;
        background: rgba(110, 114, 117, 0.6);
        border-radius: 3px;
        display: table;
        cursor: pointer;
    }
  }
</style>